<template>
	<view class="v-overlay" :class="['v-overlay-open']" @click="handleOverlayClick">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
import { ref,computed,watch,inject } from 'vue';

/**
 * v-overlay 遮罩层
 * value 是否显示遮罩层 默认值:false 可选值true显示、false隐藏
 * zIndex 遮罩层z-index值 默认值:999
 * opacity 遮罩层透明度 默认值:0.5
 * closeOnClick 是否支持点击遮罩层关闭 默认值:true 可选值true支持关闭、false不支持关闭
 * animation 遮罩层动画效果 默认值:'fade' 可选值'fade'淡入淡出等
 */
const props = defineProps({
	value: {
		type: Boolean,
		default: false
	},
	zIndex: {
		type: Number,
		default: 999
	},
	opacity: {
		type: Number,
		default: 0.5
	},
	closeOnClick: {
		type: Boolean,
		default: true
	},
	animation: {
		type: String,
		default: 'fade'
	}
});
const emits = defineEmits(['update:value','click']);

const config = inject<any>('config');
const isVisible = ref(props.value)
const visible = ref(isVisible.value ? "flex" : "none");
const backgroundColor = `rgba(0, 0, 0, ${props.opacity})`


watch(()=>props.value,(newValue)=>{
	isVisible.value = newValue
	visible.value = newValue ? "flex" : "none"
})
watch(()=>isVisible.value,(newValue)=>{
	emits('update:value', newValue)
})

const handleOverlayClick = () => {
	if (props.closeOnClick) {
		isVisible.value = false;
		visible.value = "none"
		emits('click', false);
	}
};

</script>

<style lang="scss" scoped>
.v-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: v-bind("backgroundColor");
	display: v-bind("visible");
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease;
	opacity: v-bind("config.opacity.mask");
	pointer-events: none;
	z-index: v-bind("props.zIndex");
}

.v-overlay-open {
	opacity: v-bind("backgroundColor");
	pointer-events: all;
}

.v-overlay.fade {
	opacity: v-bind("config.opacity.mask");
	transition: opacity 0.3s ease;
}

.v-overlay.fade.v-overlay-open {
	opacity: v-bind("backgroundColor");
}
</style>
